<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />      
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style type="text/css">
        #wrap{
            width: 100%;
            height: 100%;
            background-color: #f00;
            position: fixed;
            top:0;
            left: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            background-color: #0f0;
            position: absolute;
            top:200px;
            left: 200px;
        }
        
    </style>
</head>
<body>
    <div id="wrap">
        <span id="box">12</span>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    
    var touchStart_x = null,touchStart_y = null,touchMove_x = null,touchMove_y = null,boxStartX=null,boxStartY=null;
    $("#box").on("touchstart",function(e){
        touchStart_x = e.targetTouches[0].pageX;
        touchStart_y = e.targetTouches[0].pageY;
        boxStartX = $("#box").position().left;
        boxStartY = $("#box").position().top;
    })
    $("#box").on("touchmove",function(e){
        touchMove_x = e.targetTouches[0].pageX-touchStart_x;
        touchMove_y = e.targetTouches[0].pageY-touchStart_y;
        $("#box").css({
            left:boxStartX + touchMove_x,
            top:boxStartY + touchMove_y
        })
    })
</script>
</html>